<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'text',
  },
  placeholder: {
    type: String,
    default: '',
  },
  modelValue: {
    type: [String, Number],
    default: '',
  },
});

const emit = defineEmits(['update:modelValue']);
</script>

<template>
  <input
      :type="type"
      :placeholder="placeholder"
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
      class="input-field"
  />
</template>


<style scoped>
.input-field {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ccc; /* 边框颜色 */
  border-radius: 4px; /* 圆角 */
  font-size: 14px;
  color: #333; /* 输入文字颜色 */
  background-color: #fff; /* 背景色 */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-field:focus {
  border-color: #409eff; /* 聚焦时边框颜色 */
  outline: none;
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 聚焦时阴影 */
}

.input-field::placeholder {
  color: #999; /* 占位符文字颜色 */
}
</style>